<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校招实习 - 就业易招</title>
    <link rel="stylesheet" href="../css/internships.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
</head>
<body>
    <div class="app-container">
        <header class="app-header">
            <div class="left-section">
                <h1 class="logo-text">校招实习</h1>
            </div>
            <div class="right-section">
                <div class="avatar-container">
                    <img src="../assets/avatars/user-avatar.jpg" alt="用户头像" class="avatar">
                </div>
            </div>
        </header>

        <main class="internships-container">
            <div class="refresh-indicator">
                <span class="material-symbols-rounded refresh-icon">refresh</span>
                <span class="refresh-text">下拉刷新</span>
            </div>

            <div class="search-area">
                <div class="search-bar">
                    <span class="material-symbols-rounded search-icon">search</span>
                    <input type="text" class="search-input" placeholder="搜索职位、公司或关键词">
                </div>
            </div>

            <div class="filter-area">
                <div class="filter-tabs">
                    <div class="tab active" data-type="all">全部</div>
                    <div class="tab" data-type="internship">实习</div>
                    <div class="tab" data-type="fulltime">校招</div>
                </div>

                <div class="filter-options">
                    <div class="filter-option" data-filter="technical">
                        <span class="filter-icon">
                            <span class="material-symbols-rounded">code</span>
                        </span>
                        <span class="filter-label">技术</span>
                    </div>
                    <div class="filter-option" data-filter="product">
                        <span class="filter-icon">
                            <span class="material-symbols-rounded">lightbulb</span>
                        </span>
                        <span class="filter-label">产品</span>
                    </div>
                    <div class="filter-option" data-filter="design">
                        <span class="filter-icon">
                            <span class="material-symbols-rounded">palette</span>
                        </span>
                        <span class="filter-label">设计</span>
                    </div>
                    <div class="filter-option" data-filter="more">
                        <span class="filter-icon">
                            <span class="material-symbols-rounded">tune</span>
                        </span>
                        <span class="filter-label">更多</span>
                    </div>
                </div>

                <div class="sort-options">
                    <div class="sort-option active" data-sort="latest">
                        <span class="sort-label">最新</span>
                    </div>
                    <div class="sort-option" data-sort="salary">
                        <span class="sort-label">薪资</span>
                    </div>
                </div>
            </div>

            <div class="internships-list">
                <!-- 职位卡片将通过JS动态加载 -->
            </div>

            <div class="no-results">
                <img src="../assets/illustrations/no-results.svg" alt="没有结果" class="no-results-image">
                <p class="no-results-text">暂无匹配的职位</p>
                <p class="no-results-subtext">请尝试调整筛选条件</p>
            </div>

            <div class="loading-spinner">
                <div class="spinner"></div>
            </div>
        </main>

        <div class="filter-modal">
            <div class="modal-header">
                <h2>筛选条件</h2>
                <button class="close-modal">
                    <span class="material-symbols-rounded">close</span>
                </button>
            </div>
            <div class="modal-content">
                <div class="filter-group">
                    <h3 class="group-title">职位类型</h3>
                    <div class="filter-options-grid">
                        <div class="filter-option-item">
                            <input type="checkbox" id="technical" data-group="type" value="technical">
                            <label for="technical">技术开发</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="product" data-group="type" value="product">
                            <label for="product">产品经理</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="design" data-group="type" value="design">
                            <label for="design">设计</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="data" data-group="type" value="data">
                            <label for="data">数据</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="operations" data-group="type" value="operations">
                            <label for="operations">运营</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="marketing" data-group="type" value="marketing">
                            <label for="marketing">市场</label>
                        </div>
                    </div>
                </div>
                
                <div class="filter-group">
                    <h3 class="group-title">日薪范围</h3>
                    <div class="filter-options-grid">
                        <div class="filter-option-item">
                            <input type="checkbox" id="low-salary" data-group="salary" value="low">
                            <label for="low-salary">200元以下</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="medium-salary" data-group="salary" value="medium">
                            <label for="medium-salary">200-300元</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="high-salary" data-group="salary" value="high">
                            <label for="high-salary">300元以上</label>
                        </div>
                    </div>
                </div>
                
                <div class="filter-group">
                    <h3 class="group-title">工作城市</h3>
                    <div class="filter-options-grid">
                        <div class="filter-option-item">
                            <input type="checkbox" id="beijing" data-group="location" value="北京">
                            <label for="beijing">北京</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="shanghai" data-group="location" value="上海">
                            <label for="shanghai">上海</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="guangzhou" data-group="location" value="广州">
                            <label for="guangzhou">广州</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="shenzhen" data-group="location" value="深圳">
                            <label for="shenzhen">深圳</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="hangzhou" data-group="location" value="杭州">
                            <label for="hangzhou">杭州</label>
                        </div>
                        <div class="filter-option-item">
                            <input type="checkbox" id="chengdu" data-group="location" value="成都">
                            <label for="chengdu">成都</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="reset-btn">重置</button>
                <button class="apply-btn">应用筛选</button>
            </div>
        </div>

        <nav class="bottom-nav">
            <a href="../index.html" class="nav-item">
                <span class="material-symbols-rounded">home</span>
                <span class="nav-label">首页</span>
            </a>
            <a href="discovery.html" class="nav-item">
                <span class="material-symbols-rounded">explore</span>
                <span class="nav-label">发现</span>
            </a>
            <a href="internships.html" class="nav-item active">
                <span class="material-symbols-rounded">work</span>
                <span class="nav-label">实习</span>
            </a>
            <a href="activities.html" class="nav-item">
                <span class="material-symbols-rounded">event</span>
                <span class="nav-label">活动</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="material-symbols-rounded">person</span>
                <span class="nav-label">我的</span>
            </a>
        </nav>
    </div>

    <script src="../js/internships.js"></script>
</body>
</html> 